<template>
  <div class="login">
    <div class="head-title">省点心注册<van-icon name="like-o" /></div>
    <div class="user">
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码 ' }]"
        />
        <van-field
          v-model="username"
          name="nickName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />

        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >立即注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
 
<script>
import { regApi } from "@/http/api";
export default {
  data() {
    return {
      username: "",
      phone: "",
      email: "",
      password: "",
    };
  },
  methods: {
    async onSubmit(values) {
      const res = await regApi(values);
      if (res.errCode === 0) {
        console.log(res);
        this.$toast.success("注册成功");
        this.$router.push("/login");
      } else {
        this.$toast.fail("注册失败");
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url("~@/assets/images/login2.jpg") no-repeat center;

  .head-title {
    text-align: center;
    font-size: 100px;
    padding-top: 300px;
    color: #fff;
  }
  .user {
    height: 500px;
    padding: 100px;
    margin-top: 50px;
    .van-cell {
      font-size: 32px;
      border-radius: 10px;
      margin-bottom: 20px;
      height: 100px;
      line-height: 85px;
    }
    .van-button {
      margin-top: 50px;
      height: 100px;
      line-height: 100px;
      font-size: 35px;
    }
  }
}
</style>